<template>
  <div>
    <el-dialog title="修改博客" width="80%" top="16px" :visible.sync="dialogVisible">
      <div class="write-header">
        <div>
          <label for="title">
            标题:
            <input id="title" type="text" v-model="title" placeholder="请输入标题" />
          </label>
          <label for="way">
            方向:
            <input id="way" type="text" v-model="way" placeholder="请输入方向" />
          </label>
        </div>
        <div>
          <button @click="dialogVisible = false">取消</button>
          <button @click="save(markdownTest, render)">保存</button>
        </div>
      </div>
      <mavon-editor
        v-model="editContent"
        ref="md"
        :codeStyle="codeStyle"
        @save="save"
        @change="change"
        :ishljs="true"
        class="mavonWrite"
      />
    </el-dialog>

    <el-table
      :row-style="{ height: '80px' }"
      :data="
        currentBlogList.filter(
          (data) => !search || data.title.toLowerCase().includes(search.toLowerCase())
        )
      "
      style="width: 100%"
    >
      <el-table-column type="expand">
        <template slot-scope="props"> </template>
      </el-table-column>
      <el-table-column label="id" width="80" prop="id"> </el-table-column>
      <el-table-column label="标题" prop="title"> </el-table-column>
      <el-table-column label="观看数" width="120" prop="seeNum"> </el-table-column>
      <el-table-column label="点赞数" width="120" prop="goodNum"> </el-table-column>
      <el-table-column label="收藏数" width="120" prop="collectNum"> </el-table-column>
      <el-table-column label="完成时间" width="160" prop="time">
        <template slot-scope="scope">
          <span>{{ getFormatTime(scope.row.time) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="方向" prop="way" width="180"> </el-table-column>
      <el-table-column align="right">
        <template slot="header" slot-scope="scope">
          <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
        </template>
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 16px">
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page="currentPage"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="10"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="blogList.length"
      >
      </el-pagination>
    </div>
  </div>
</template>

<style scoped lang="less">
.write-header {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  input {
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    margin-right: 16px;
    padding: 6px 12px;
    outline: none;
    margin-left: 4px;
  }
  button {
    border: none;
    background-color: #448ef7;
    color: #fff;
    border-radius: 3px;
    width: 80px;
    height: 100%;
    margin-left: 16px;
    &:nth-child(1) {
      background-color: #fff;
      border: 1px solid #99a9bf;
      color: #333;
      transition: all 0.1s;
      &:hover {
        background-color: #eef5fe;
        color: #448ef7;
        border-color: #5a9df8;
      }
    }
    &:hover {
      opacity: 0.8;
      cursor: pointer;
    }
  }
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.mavonWrite {
  height: calc(100vh - 220px);
}
</style>

<script>
import { env } from "../http";
import { formatTime } from "../util";
export default {
  data() {
    return {
      blogList: [],
      search: "",
      dialogVisible: false,
      editContent: "",
      codeStyle: "vs2015",
      title: "",
      way: "",
      markdownTest: "",
      render: "",
      blogId: 0,
      currentPage: 1,
      currentSize: 10,
    };
  },
  mounted() {
    this.getBlogList();
  },
  computed: {
    getFormatTime() {
      return (time) => formatTime(time || 0);
    },
    currentBlogList() {
      return this.blogList.filter((item, index) => {
        return (
          index > (this.currentPage - 1) * this.currentSize &&
          index <= this.currentPage * this.currentSize
        );
      });
    },
  },
  methods: {
    sizeChange(currentSize) {
      this.currentSize = currentSize;
    },
    currentChange(currentPage) {
      console.log(currentPage);
      this.currentPage = currentPage;
    },
    change(value, render) {
      this.markdownTest = value;
      this.render = render;
    },
    getBlogList() {
      fetch(env + "/blog/alllist", {
        method: "get",
        headers: {
          Authorization: localStorage.getItem("LoginToken"),
          "Content-Type": "application/json",
        },
      })
        .then((res) => res.json())
        .then((res) => {
          res.error === -1 && (this.blogList = res.data);
        });
    },
    handleEdit(index, row) {
      fetch(env + "/blog/markdownDetail?id=" + row.id, {
        method: "get",
        headers: {
          "Content-Type": "application/json",
        },
      })
        .then((res) => res.json())
        .then((res) => {
          if (res.error === -1) {
            this.editContent = res.data.editContent;
            this.title = res.data.title;
            this.way = res.data.way;
            this.dialogVisible = true;
            this.blogId = res.data.id;
          }
        });
      // this.editContent = row.
    },
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.deleteBlog(row.id);
      });
    },
    deleteBlog(id) {
      const body = {
        id,
      };
      fetch(env + "/blog/del", {
        method: "post",
        body: JSON.stringify(body),
        headers: {
          Authorization: localStorage.getItem("LoginToken"),
          "Content-Type": "application/json",
        },
      })
        .then((res) => res.json())
        .then((res) => {
          if (res.error === -1) {
            this.$message.success({
              message: "删除成功",
              center: true,
            });
            this.getBlogList();
          }
        });
    },
    getAbstract(html) {
      const div = document.createElement("div");
      div.innerHTML = html;
      return div.innerText.substring(0, 30) + "...";
    },
    save(value, render) {
      if (!this.title || !this.way) {
        alert("请输入标题或方向");
        return;
      }
      const body = {
        title: this.title,
        way: this.way,
        editContent: value,
        content: render,
        id: this.blogId,
        abstract: this.getAbstract(render),
      };
      fetch(env + "/blog/update", {
        method: "post",
        body: JSON.stringify(body),
        headers: {
          Authorization: localStorage.getItem("LoginToken"),
          "Content-Type": "application/json",
        },
      })
        .then((res) => res.json())
        .then((res) => {
          if (res.error === -1) {
            this.$message.success({
              message: "修改成功",
              center: true,
            });
            this.getBlogList();
            this.dialogVisible = false;
          }
        });
    },
  },
};
</script>
